iosevka hyperlegible

saturday, 3 april 2021

iosevka is hands down my favourite monospaced font for programming, writing, desktop.. everything in my day to day computer workflow. It can be installed in many pre-built typeface flavours.

But what i love most about Iosevka is its how you can make it your own, choosing the character embellishments that suit your personal aesthetic. i am a font nutter and for the longest time had Iosevka configured to look like my favourite geometric typeface, Jost*, a Futura like font.

geometric sans-serif

was easily configured in Iosevka with..

[buildPlans.iosevka$family.variants] # inherits = "" # defaults [buildPlans.iosevka-custom.variants.design] capital-d = "more-rounded-serifless" capital_g = "toothless-rounded-serifless-hooked" capital-i = "serifless" capital-j = "serifless" capital-k = "symmetric-touching" capital-m = "flat-bottom" capital-q = "crossing" capital-w = "straight-flat-top" d = "toothed-serifless" f = "serifless-crossbar-at-x-height" i = "serifless" j = "serifless" # j = "straight-line" ** k = "symmetric-touching" l = "serifless" q = "straight" r = "compact" t = "cross" w = "straight-flat-top" y = "straight" [buildplans.iosevka.variants.italic] a = "double-storey" d = "toothed" e = "flat-crossbar" f = "serifless-crossbar-at-x-height" k = "symmetric-touching" u = "toothed" y = "straight" ... [buildPlans.iosevka-custom.metric-override] cap = 800 # increase ascender height ...

Note: i went even further and used a “straight-line” lower case j for a more radical geometric typeface.. not exactly maximizing readability with simply a lower descender than the lower case i—but being intimately familiar with this geometric typeface everywhere, it never presented any reading difficulty for me, even when working with source code at small point sizes.

That was before i discovered the..

atkinson hyperlegible

sans-serif font in the Kindle reddit forum, a grotesque font developed by the Braille Institute for maximum character recognition. Trying it out on my Kindle verified that it is highly readable even at insanely small font sizes. While such a goal might suggest something less than in terms of aesthetic, i found it actually to be the opposite. No doubt, its readability is in part due to its pleasing rendering to the eyes—which it had to be in order to displace my favourite font for ebook reading, the serif typeface Tiempos Text—i still love its “book” typeset feel.

From complete immersion with this font as my go to Kindle setting, the Atkinson Hyperlegible font has made its way to the body text of this site to capitalize on its readability—admittedly, a difficult to measure improvement over the highly legible Jost* geometric font it replaces.

My conversion to this typeface beckoned the creation of a monospaced version and so this Iosevka emulation..

[buildPlans.iosevka.variants] # inherits = "" # defaults [buildplans.iosevka.variants.design] capital-d = "more-rounded-serifless" # D capital-g = "toothed-serifless-hooked" # G capital-i = "serifed" # I capital-j = "serifless" # J capital-k = "straight" # K capital-m = "flat-bottom" # M capital-q = "crossing" # Q capital-w = "straight-flat-top" # W d = "toothed-serifless" # d = "tailed-serifless" exaggerated f = "flat-hook-crossbar-at-x-height" i = "hooky" j = "flat-hook-serifless" k = "straight" l = "flat-tailed" q = "diagonal-tailed" # fontforge mod ** r = "compact" t = "flat-hook-short-neck2" w = "straight-flat-top" y = "straight-turn" zero = "reverse-slashed" # 0 one = "nobase-flat-top-serif" # 1 two = "straight-neck" # 2 four = "closed" # 4 five = "oblique-upper-left-bar" # 5 six = "closed-contour" # 6 eight = "two-circles" # 8 brace = "straight" # {} ampersand = "upper-open" # & # at = "fourfold" at = "short" # @ *** cyrl-ka = "symmetric-touching" # к lower-iota = "flat-tailed" # ι lower-lambda = "straight-turn" # λ number-sign = "upright" # # *** paragraph-sign = "low" # ¶ # percent = "rings-continuous-slash" percent = "dots" # % *** [buildplans.iosevka.variants.italic] a = "double-storey" d = "toothed" e = "flat-crossbar" f = "flat-hook-crossbar-at-x-height" k = "straight" u = "toothed" y = "straight-turn" eszet = "sulzbacher" # ß ...

**Use fontforge to replace the “diagonal-tailed” utf-8 char 0071 with utf-8 char 024b for an even closer match to the Atkinson Hyperlegible lower case q.
***Some minor deviations for improved monospaced readability (IMO) and simply personal aesthetic. YMMV.

font families

custom line height and “extended width” settings in the private-build-plans.toml** configuration file create individual font families for..

[buildPlans.iosevka-custom] # <iosevka-custom> is your plan name family = "Iosevka" # Font menu family name ** spacing = "term" serifs = "sans" ... [buildPlans.iosevka-custom.metric-override] leading = 1450 ...

coding with a slightly enhanced line spacing (leading) and..

[buildPlans.iosevka-custom] # <iosevka-custom> is your plan name family = "Iosevka-proof" # Font menu family name ** spacing = "term" serifs = "sans" ... [buildPlans.iosevka-custom.widths.normal] shape = 576 # Unit Width ... [buildPlans.iosevka-custom.metric-override] leading = 2250 ...

writing in my workflow. For writing i chose to increase the line spacing significantly for proofing and increase the character width (shape) for more relaxed readability (versus the default density for coding).

You gotta love the customization possibilities of the Iosevka font!

**Note: configuration files are required per font family, each a separate font generation step.

comparison

monospaced fonts are challenged by their rigid fixed character width. Multi-stroke letters like the M and W can feel cramped while single-stroke letters like the lower case i and l can feel detached.

Without kerning the gaps surrounding my former geometric font’s “straight” lower case i j and l, produce a subtle tension with their heightened visual spacing in comparison to the grotesque font with its hooks and tails which subtly fill in more of their visual character width—even though the fixed width character density remains identical.

By the same token, matching Iosevka’s lower case character variants to those of the Hyperlegible font—notably the f j q r t—renders a uniquely pleasing modern monospaced typeface for general writing and coding. This monospaced Hyperlegible emulation is further enhanced with the addition of an extended width font family for general writing to give multi-stroke characters even more breathing room.

Iosevka. It is an amazing font library which can create unique font sets or be tailored to mimic almost any other monospaced font.

fine tuning

while Iosevka’s character flares can be matched to the Atkinson Hyperlegible font, the fixed monospaced cell width imposes its own constraints on the rendering of the “closed” characters producing more oval shapes in comparison to their proportional counterparts. This is most apparent with the default (non-extended) settings.

This oval shaping of the default (width) font can be softened by reducing the metric-override sb side bearing value..

[buildPlans.iosevka-custom.metric-override] sb = 50 # down from 60 ...

to narrow the visual character spacing while widening the character stroke.

The extended width Iosevka-proof font also exhibits this oval shape constraint, though to a much lesser degree with its wider width. But it too can be further rounded by reducing its side bearing value..

[buildPlans.iosevka-custom.metric-override] sb = 70 # down from 80 (estimated extended setting) ...

These adjustments subtly open the lower case characters, rendering the strokes of the lower case b c d e g o p and q more circular shapes similar to their proportional counterparts. The character density remains identical whilst retaining good separation (IMO) between the characters. The multi-stroke M and W characters also benefit from the added stroke width for better delineation (in both upper and lower case).

The difference in character separation is, in practice, only discernible in a side by side comparison with the default font settings. It is otherwise unnoticeable, the appearance gaining an almost faux kerning*** effect with the more rounded strokes and subtle visual tightening of the characters. Some may prefer the slightly wider visual separation of the default font settings for the readability it produces. YMMV.

With or without the added rounding of the characters, this is now my go to font for coding and writing.

***Note: Iosevka remarkably supports a “quasi-proportional” serif and sans serif font family with actual kerning adjustments specifically for the purpose of writing (versus coding). Beautiful as they are, i do not use either, much preferring my monospaced Hyperlegible font emulation—for markdown composition—whose chosen character designs are not available for proportional font generation.

extended width coding

the natural coding font width of Iosevka is half a character cell. This renders a compact font with a slightly narrow width for coding, even with the side bearing adjustment above to round the characters somewhat.

Applying the extended width value of 576 opens up the character spacing and works nicely in larger font sizes for prose writing. But for the smaller coding font sizes the font, however the spacing information is encoded, looks too “spacey” with gaps between the characters, even with the minor side bearing adjustment above.

Decreasing the side bearing even more resolves this with an unintended optical illusion: the characters more closely match their proportional counterparts (from the side bearing adjustment) and the font size appears larger (because of the font width increase, not in actuality)!

So, by setting the shape width to 576 and applying a reduced side bearing value of 60, displaying the resultant font one fontsize less than what is normally used for coding renders a font very close to what one would imagine a monospaced Atkinson Hyperlegible font would look like without too much loss in character density nor perceived reduction in font size.

This works for me at fontsize 9 (replacing the standard Iosevka font at fontsize 10). YMMV.

fontforge

as mentioned earlier, Iosevka does not have a lower case q that quite matches the Atkinson font. The “diagonally-tailed” character option, though, does present a similar flare with its reverse tail, and at small display sizes, is a good facsimile.

But there is a solution for achieving an even better character match. Iosevka has in its extended character set the q character with a curved tail: character 0u024b. The following fontforge script file allows us to copy and paste this character to replace the lower case q or character 0u0071..

Open($1); Select(0u024b); Copy(); Select(0u0071); Paste(); Generate($1);

with..

fontforge --script <script> <font.ttf>

Voila! A font that passes the litmus test for its inspiration IMO (as can be seen in the code snippets on this and other pages of this site)! i like this font so much i even have it on my Kindle!

sources

**Above EM “metric-override” parameters changed to “metric-override.multiplies” (scaling values).

»»  an oasis

comment ?